import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux'
import { Route, BrowserRouter, Redirect } from "react-router-dom";
import Header from "../common/header";
import loadable from "./loadable.js";
const Home = loadable(() => import('../page/home'))
const Login = loadable(() => import('../page/login'))
const Detail = loadable(() => import('../page/detail'))
const Write = loadable(() => import('../page/write'))
const NullPage = loadable(() => import('../page/nullPage'))

class RouteConfig extends Component {
    render() {
        const { login } = this.props;
        let page;
        if (login) {
            page = (
                <BrowserRouter>
                    <Header />
                    <Route path="/" exact component={Home}></Route>
                    <Route path="/detail/:id" exact component={Detail}></Route>
                    <Route path="/write" exact component={Write}></Route>
                    <Route exact component={NullPage} />
                </BrowserRouter>)
        } else {
            page = (<BrowserRouter>
                <Route path="/*" exact component={Login}></Route>
                <Route path="/login" exact component={Login}></Route>
            </BrowserRouter>)
        }
        return page
    }
}

// redux拿到token并挂载到App的props上面
const mapStateToProps = (state, ownProps) => {
    return { login: state.getIn(["login", 'login']), }
}
export default connect(mapStateToProps, null)(RouteConfig)